<template>
  <el-dialog class="public-dialog" :title="title" width="1200" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <XForm ref="form" :formData="formData" :fieldList="fieldList" :options="formOption" :rules="rules">
      <!-- <template #category>
        <VCascader v-model:modelValue="formData.product_category" type="2" />
      </template> -->

      <template #VIEW>
        <el-divider> 设置产品活跃度规则 </el-divider>
        <!-- 重点-规则 --> 
        <div class="strategy-rules flex mt-[16px]">
          最近
          <el-form-item prop="strategy_rules.keynote.last_days">
            <el-input v-model="formData.strategy_rules.keynote.last_days" />
          </el-form-item>
          天，商品销量在
          <el-form-item prop="strategy_rules.keynote.sales_volume[0]">
            <el-input v-model="formData.strategy_rules.keynote.sales_volume[0]" />
          </el-form-item>
          -
          <el-form-item prop="strategy_rules.keynote.sales_volume[1]">
            <el-input v-model="formData.strategy_rules.keynote.sales_volume[1]" />
          </el-form-item>
          范围内，且呆滞库龄天数在

          <el-form-item prop="strategy_rules.keynote.dead_stock_age[0]">
            <el-input v-model="formData.strategy_rules.keynote.dead_stock_age[0]" />
          </el-form-item>
          -
          <el-form-item prop="strategy_rules.keynote.dead_stock_age[1]">
            <el-input v-model="formData.strategy_rules.keynote.dead_stock_age[1]" />
          </el-form-item>
          范围内时，且销售毛利区间在

          <el-form-item prop="strategy_rules.keynote.gross_profit[0]">
            <el-input v-model="formData.strategy_rules.keynote.gross_profit[0]" />
          </el-form-item>
          -
          <el-form-item prop="strategy_rules.keynote.gross_profit[1]">
            <el-input v-model="formData.strategy_rules.keynote.gross_profit[1]" />
          </el-form-item>

          范围内时，定义为 <span class="text-[20px] text-red">重点</span>
        </div>
        <!-- 正常-规则 -->
        <div class="strategy-rules flex">
          最近
          <el-form-item prop="strategy_rules.normal.last_days">
            <el-input v-model="formData.strategy_rules.normal.last_days" />
          </el-form-item>
          天，商品销量在
          <el-form-item prop="strategy_rules.normal.sales_volume[0]">
            <el-input v-model="formData.strategy_rules.normal.sales_volume[0]" />
          </el-form-item>
          -
          <el-form-item prop="strategy_rules.normal.sales_volume[1]">
            <el-input v-model="formData.strategy_rules.normal.sales_volume[1]" />
          </el-form-item>
          范围内，且呆滞库龄天数在

          <el-form-item prop="strategy_rules.normal.dead_stock_age[0]">
            <el-input v-model="formData.strategy_rules.normal.dead_stock_age[0]" />
          </el-form-item>
          -
          <el-form-item prop="strategy_rules.normal.dead_stock_age[1]">
            <el-input v-model="formData.strategy_rules.normal.dead_stock_age[1]" />
          </el-form-item>
          范围内时，且销售毛利区间在

          <el-form-item prop="strategy_rules.normal.gross_profit[0]">
            <el-input v-model="formData.strategy_rules.normal.gross_profit[0]" />
          </el-form-item>
          -
          <el-form-item prop="strategy_rules.normal.gross_profit[1]">
            <el-input v-model="formData.strategy_rules.normal.gross_profit[1]" />
          </el-form-item>

          范围内时，定义为 <span class="text-[20px] text-red">正常</span>
        </div>

        <!-- 清库-规则 -->
        <div class="strategy-rules flex">
          库存数量在
          <el-form-item prop="strategy_rules.clearing.inventory_quantity[0]">
            <el-input v-model="formData.strategy_rules.clearing.inventory_quantity[0]" />
          </el-form-item>
          -
          <el-form-item prop="strategy_rules.clearing.inventory_quantity[1]">
            <el-input v-model="formData.strategy_rules.clearing.inventory_quantity[1]" />
          </el-form-item>
          范围内，且呆滞库龄天数在

          <el-form-item prop="strategy_rules.clearing.dead_stock_age[0]">
            <el-input v-model="formData.strategy_rules.clearing.dead_stock_age[0]" />
          </el-form-item>
          -
          <el-form-item prop="strategy_rules.clearing.dead_stock_age[1]">
            <el-input v-model="formData.strategy_rules.clearing.dead_stock_age[1]" />
          </el-form-item>
          范围内 <span class="text-[20px] mx-[4px]">或</span> 全仓可售天数大于
          <el-form-item prop="strategy_rules.clearing.days_on_market">
            <el-input v-model="formData.strategy_rules.clearing.days_on_market" />
          </el-form-item>
          范围内 <span class="text-[20px] mx-[4px]">或</span> 销售毛利区间在
          <el-form-item prop="strategy_rules.clearing.gross_profit[0]">
            <el-input v-model="formData.strategy_rules.clearing.gross_profit[0]" />
          </el-form-item>
          -
          <el-form-item prop="strategy_rules.clearing.gross_profit[1]">
            <el-input v-model="formData.strategy_rules.clearing.gross_profit[1]" />
          </el-form-item>
          范围内，定义为 <span class="text-[20px]">清库</span>
        </div>

        <!-- 新品-规则 -->
        <div class="strategy-rules flex">
          <el-form-item prop="strategy_rules.new.time_type">
            <el-select v-model="formData.strategy_rules.new.time_type" style="width: 120px">
              <el-option label="审核时间" value="review_time" />
              <el-option label="添加时间" value="add_time" />
              <el-option label="开发时间" value="dev_time" />
              <el-option label="上架时间" value="publish_time" />
            </el-select>
          </el-form-item>
          在最近
          <el-form-item prop="strategy_rules.new.last_days[0]">
            <el-input v-model="formData.strategy_rules.new.last_days[0]" />
          </el-form-item>
          -
          <el-form-item prop="strategy_rules.new.last_days[1]">
            <el-input v-model="formData.strategy_rules.new.last_days[1]" />
          </el-form-item>
          范围内，
          <!-- 且刊登的渠道SKU数量在
          <el-form-item prop="strategy_rules.new.channel_sku_count[0]">
            <el-input v-model="formData.strategy_rules.new.channel_sku_count[0]" />
          </el-form-item>
          -
          <el-form-item prop="strategy_rules.new.channel_sku_count[1]">
            <el-input v-model="formData.strategy_rules.new.channel_sku_count[1]" />
          </el-form-item> -->
          定义为<span class="text-[20px]">新品</span>
        </div>

        <el-form-item label="状态：" class="w-[100%] mt-[20px]">
          <el-switch v-model="formData.status" size="large" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <div class="w-[100%]">备注：规则设置并激活后，第二天才会生效，请第二天查看数据！</div>
      </template>
    </XForm>
    <template #footer>
      <el-button @click="handleClose(false)"> 取消 </el-button>
      <el-button type="primary" :loading="loading" @click="handleSave" v-if="!formOption.disabled"> 保存 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus"
import { asinStrategyDetail, asinStrategyCreate, asinStrategyEdit, usedCategory } from "@/api/base"
import XForm from "@/components/XForm/index.vue"
// import Cascader from "@/components/XForm/components/Cascader/index.vue"

const modelValue = ref(false)
const emit = defineEmits(["refresh"])
const data = reactive({
  title: "详情",
  type: "",
  formData: {},
  loading: false,
})
const initformData = {
  strategy_rules: {
    keynote: {
      last_days: "", //最近n天
      sales_volume: [], //商品销量
      dead_stock_age: [], //呆滞库龄
      gross_profit: [], // 销售毛利
    },
    normal: {
      last_days: "", //最近n天
      sales_volume: [], //商品销量
      dead_stock_age: [], //呆滞库龄
      gross_profit: [], // 销售毛利
    },
    clearing: {
      inventory_quantity: [], //库存数量
      dead_stock_age: [], //呆滞库龄
      days_on_market: "", //可售天数
      gross_profit: [], // 销售毛利
    },
    new: {
      time_type: "", //时间类型 review_time审核时间 add_time添加时间 dev_time开发时间
      last_days: [], //在最近天数范围
      channel_sku_count: [], //渠道sku数量
    },
  },
}
data.formData = JSON.parse(JSON.stringify(initformData))
const { title, type, formData, loading } = toRefs(data)
const form = ref()
const handleClose = (refresh = false) => {
  modelValue.value = false
  console.log(data)
  formData.value = JSON.parse(JSON.stringify(initformData))
  form?.value.resetForm()
  if (refresh) emit("refresh")
}
const titleOpt = {
  add: "新增",
  edit: "编辑",
  look: "详情",
}
let notIds = ref([])
const open = async (params = {}) => {
  title.value = titleOpt[params.type]
  type.value = params.type
  console.log(params)
  if (params.type != "add") {
    let res = await asinStrategyDetail({ id: params.id })
    console.log(res.data)
    formData.value = res.data
  }
  formOption.value.disabled = params.type == "look"
  modelValue.value = true

  // let ids = (await usedCategory())?.data?.ids
  // console.log(999)
  // console.log(ids)
  // notIds.value = ids
  // console.log(form.value.formRef)
}
const handleSave = async () => {
  // console.log(formData.value)
  try {
    let api = null
    switch (type.value) {
      case "add":
        api = asinStrategyCreate
        break
      case "edit":
        api = asinStrategyEdit
        break
    }
    await form.value.submit()

    api(formData.value).then((res) => {
      console.log(res)
      ElMessage.success(res.message)
      handleClose(true)
    })
  } catch (error) {
    console.warn(error)
  }
}

const formOption = ref({ labelWidth: "120px", inline: true, disabled: false })
const publicStyle = { style: { width: "120px" } }
const fieldList = ref([
  {
    label: "策略名称",
    field: "strategy_name",
    placeholder: "策略名称",
    style: { width: "380px" },
  },
  { type: "br" },
  {
    label: "商品分类",
    field: "product_category",
    // slot: "category",
    type: "cascaderNew",
    cascaderType: "category",
    placeholder: "商品分类",
    cascaderProps: { emitPath: false },
    style: { width: "380px" },
  },
  { type: "br" },

  { slot: "VIEW" },
])
const rules = ref({
  strategy_name: [{ required: true, message: "请输入", trigger: "blur" }],
  product_category: [{ required: true, message: "请选择", trigger: "change" }],

  "strategy_rules.keynote.last_days": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.keynote.sales_volume[0]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.keynote.sales_volume[1]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.keynote.dead_stock_age[0]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.keynote.dead_stock_age[1]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.keynote.gross_profit[0]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.keynote.gross_profit[1]": [{ required: true, message: "请输入", trigger: "blur" }],

  "strategy_rules.normal.last_days": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.normal.sales_volume[0]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.normal.sales_volume[1]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.normal.dead_stock_age[0]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.normal.dead_stock_age[1]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.normal.gross_profit[0]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.normal.gross_profit[1]": [{ required: true, message: "请输入", trigger: "blur" }],

  "strategy_rules.clearing.inventory_quantity[0]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.clearing.inventory_quantity[1]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.clearing.dead_stock_age[0]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.clearing.dead_stock_age[1]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.clearing.days_on_market": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.clearing.gross_profit[0]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.clearing.gross_profit[1]": [{ required: true, message: "请输入", trigger: "blur" }],

  "strategy_rules.new.time_type": [{ required: true, message: "请选择", trigger: "change" }],
  "strategy_rules.new.last_days[0]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.new.last_days[1]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.new.channel_sku_count[0]": [{ required: true, message: "请输入", trigger: "blur" }],
  "strategy_rules.new.channel_sku_count[1]": [{ required: true, message: "请输入", trigger: "blur" }],
})

defineExpose({ open })
</script>
<style lang="scss" scoped>
.strategy-rules {
  // padding-left: 10px;
  .el-form-item {
    margin-right: 0;
  }
  .el-input {
    width: 50px;
  }
}
</style>
